<script lang="ts" setup>
import { ref, watch } from 'vue';

// import { CloudUpload } from '@vben/icons';
import { IconifyIcon } from '@vben/icons';

import { Button, Input, Modal } from 'ant-design-vue';

interface Props {
  value?: string;
}

interface Emits {
  (e: 'update:value', value: string): void;

  (e: 'change', value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const selectedColor = ref(props.value || '#1890ff');
const showColorPicker = ref(false);

// 预设颜色
const presetColors = [
  '#f5222d',
  '#fa8c16',
  '#fadb14',
  '#52c41a',
  '#1890ff',
  '#722ed1',
  '#eb2f96',
  '#ff4d4f',
  '#ff7a45',
  '#ffa940',
  '#bae637',
  '#36cfc9',
  '#597ef7',
  '#9254de',
  '#ff7875',
  '#ffbb96',
  '#ffe58f',
  '#d3f261',
  '#87e8de',
  '#adc6ff',
  '#d3adf7',
];

// 主题颜色
const themeColors = [
  '#1890ff',
  '#52c41a',
  '#faad14',
  '#f5222d',
  '#722ed1',
  '#13c2c2',
  '#eb2f96',
  '#fa8c16',
  '#a0d911',
  '#fadb14',
  '#fa541c',
  '#2f54eb',
  '#fa8c16',
  '#13c2c2',
];

const selectColor = (color: string) => {
  selectedColor.value = color;
  emit('update:value', color);
  emit('change', color);
};

const selectColorFromPicker = (color: string) => {
  selectedColor.value = color;
  emit('update:value', color);
  emit('change', color);
  showColorPicker.value = false;
};

const handleColorChange = (e: any) => {
  const color = e.target.value;
  selectedColor.value = color;
  emit('update:value', color);
  emit('change', color);
};

watch(
  () => props.value,
  (newValue) => {
    selectedColor.value = newValue || '#1890ff';
  },
);
</script>
<template>
  <div class="color-selector">
    <div class="color-input">
      <Input
        v-model:value="selectedColor"
        placeholder="请输入颜色值或点击选择"
        @change="handleColorChange"
        readonly
        @click="showColorPicker = true"
      />
      <div
        v-if="selectedColor"
        class="color-preview"
        :style="{ backgroundColor: selectedColor }"
      ></div>
      <Button
        type="text"
        size="small"
        @click="showColorPicker = true"
        class="color-picker-btn"
      >
        <!--        <CloudUpload />-->
        <IconifyIcon icon="ant-design:bg-colors-outlined" :size="16" />
      </Button>
    </div>

    <!-- 颜色选择弹窗 -->
    <Modal
      v-model:open="showColorPicker"
      title="选择颜色"
      width="500px"
      :footer="null"
      @cancel="showColorPicker = false"
    >
      <div class="color-picker-content">
        <div class="palette-section">
          <div class="section-title">预设颜色</div>
          <div class="color-grid">
            <div
              v-for="color in presetColors"
              :key="color"
              class="color-item"
              :class="{ active: selectedColor === color }"
              :style="{ backgroundColor: color }"
              @click="selectColorFromPicker(color)"
              :title="color"
            ></div>
          </div>
        </div>

        <div class="palette-section">
          <div class="section-title">主题颜色</div>
          <div class="color-grid">
            <div
              v-for="color in themeColors"
              :key="color"
              class="color-item"
              :class="{ active: selectedColor === color }"
              :style="{ backgroundColor: color }"
              @click="selectColorFromPicker(color)"
              :title="color"
            ></div>
          </div>
        </div>

        <div class="palette-section">
          <div class="section-title">自定义颜色</div>
          <div class="custom-color">
            <Input
              v-model:value="selectedColor"
              placeholder="请输入颜色值（如：#1890ff）"
              @change="handleColorChange"
            />
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<style lang="less" scoped>
.color-selector {
  .color-input {
    display: flex;
    align-items: center;
    gap: 8px;

    .color-preview {
      width: 32px;
      height: 32px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }

    .color-picker-btn {
      flex-shrink: 0;
    }
  }

  .color-picker-content {
    .palette-section {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-weight: 500;
        margin-bottom: 8px;
        color: #666;
        font-size: 12px;
        text-transform: uppercase;
      }

      .color-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;

        .color-item {
          width: 24px;
          height: 24px;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          cursor: pointer;
          transition: all 0.2s;

          &:hover {
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          }

          &.active {
            border: 2px solid #1890ff;
            transform: scale(1.1);
          }
        }
      }

      .custom-color {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
